<div class="container">
  <div class="row">

    <div class="col s12 m8 offset-m1 xl7 offset-xl1">

      <div id="radio" class="section scrollspy">
        <p>Radio Buttons are used when the user must make only one selection out of a group of items. The <code class="language-markup">for</code> attribute is necessary to bind our custom radio button with the input. Add the input's <code class="language-markup">id</code> as the value of the <code class="language-markup">for</code> attribute of the label.</p>
        <p>Add radio buttons to a group by adding the name attribute along with the same corresponding value for each of the radio  buttons in the group. Create disabled radio buttons by adding the disabled attribute as shown below.</p>
        <form action="#">
          <p>
            <label>
              <input name="group1" type="radio" checked />
              <span>Red</span>
            </label>
          </p>
          <p>
            <label>
              <input name="group1" type="radio" />
              <span>Yellow</span>
            </label>
          </p>
          <p>
            <label>
              <input class="with-gap" name="group1" type="radio"  />
              <span>Green</span>
            </label>
          </p>
          <p>
            <label>
              <input name="group1" type="radio" disabled="disabled" />
              <span>Brown</span>
            </label>
          </p>
        </form>
        <br>
        <pre><code class="language-markup">
  &lt;form action="#">
    &lt;p>
      &lt;label>
        &lt;input name="group1" type="radio" checked />
        &lt;span>Red&lt;/span>
      &lt;/label>
    &lt;/p>
    &lt;p>
      &lt;label>
        &lt;input name="group1" type="radio" />
        &lt;span>Yellow&lt;/span>
      &lt;/label>
    &lt;/p>
    &lt;p>
      &lt;label>
        &lt;input class="with-gap" name="group1" type="radio"  />
        &lt;span>Green&lt;/span>
      &lt;/label>
    &lt;/p>
    &lt;p>
      &lt;label>
        &lt;input name="group1" type="radio" disabled="disabled" />
        &lt;span>Brown&lt;/span>
      &lt;/label>
    &lt;/p>
  &lt;/form>
        </code></pre>
      </div>

      <div id="gap" class="section scrollspy">
        <h3 class="header">With Gap</h3>
        <p>To create a radio button with a gap, add <code class="language-markup">class="with-gap"</code> to your input. See the example below.</p>

        <p>
          <label>
            <input class="with-gap" name="group3" type="radio" checked />
            <span>Red</span>
          </label>
        </p>
        <pre><code class="language-markup">
  &lt;p>
    &lt;label>
      &lt;input class="with-gap" name="group3" type="radio" checked />
      &lt;span>Red&lt;/span>
    &lt;/label>
  &lt;/p>
        </code></pre>

      </div>


    </div>
    <div class="col hide-on-small-only m3 xl3 offset-xl1">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIK27J&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#radio">Radio Buttons</a></li>
            <li><a href="#gap">With Gap</a></li>

          </ul>
        </div>
      </div>
    </div>

  </div>
</div>
